<template>
	<view class="history-container">
		<!-- 搜索区域 -->
		<view class="search-box">
			<uni-icons type="search" size="20" color="#999" />
			<input class="search-input" placeholder="输入会员ID或关键词搜索" v-model="searchKey" @confirm="loadData" />
		</view>

		<!-- 数据列表 -->
		<scroll-view scroll-y class="list-scroll" @scrolltolower="loadMore">
			<view class="list-header">
				<text class="header-cell">会员ID</text>
				<text class="header-cell">询问内容</text>
				<text class="header-cell">询问时间</text>
			</view>

			<view v-for="(item, index) in listData" :key="index" class="list-item">
				<text class="user-id">{{ item.user_id }}</text>
				<text class="content"
					@click="showFullContent(item)">[{{item.bot_name}}]{{ item.content }}</text>
				<text class="time">{{ formatDate(item.create_time) }}</text>
			</view>

			<!-- 加载状态 -->
			<view class="loading-status">
				<text v-if="loading">加载中...</text>
				<text v-else-if="listData.length === 0" class="empty-tip">暂无询问记录</text>
			</view>
		</scroll-view>

		<uni-popup ref="popup" type="dialog">
			<view class="content-popup">
				<scroll-view scroll-y class="popup-scroll">
					<view >询问人ID：{{selectedItem?.user_id}}</view>
					<view >智能体名称：{{selectedItem?.bot_name}}</view>
					<view >询问内容：{{ selectedItem?.content }}</view>
				</scroll-view>
				<button class="popup-close" @click="$refs.popup.close()">关闭</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		userApi,
		chatApi
	} from '@/utils/api.js'

	export default {
		data() {
			return {
				searchKey: '',
				listData: [],
				page: 1,
				pageSize: 10,
				loading: false,
				hasMore: true,
				selectedItem:null,
			}
		},
		onLoad() {
			this.loadData()
		},
		methods: {
			showFullContent(i) {
				this.selectedItem = i
				this.$refs.popup.open()
			},
			// 加载数据
			async loadData() {
				this.page = 1
				this.hasMore = true
				try {
					const res = await chatApi.getUserAskLog({
						page: this.page,
						pageSize: this.pageSize,
						search: this.searchKey
					})
					this.listData = res.data || []
				} catch (e) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				}
			},

			// 加载更多
			async loadMore() {
				if (!this.hasMore || this.loading) return
				this.page++
				try {
					const res = await chatApi.getUserAskLog({
						page: this.page,
						pageSize: this.pageSize,
						search: this.searchKey
					})
					if (res.data?.length) {
						this.listData = [...this.listData, ...res.data]
					} else {
						this.hasMore = false
					}
				} catch (e) {
					uni.showToast({
						title: '加载更多失败',
						icon: 'none'
					})
				}
			},

			// 时间格式化
			formatDate(timestamp) {
				if (!timestamp) return ''
				const date = new Date(timestamp)
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
			}
		}
	}
</script>

<style scoped>
	.history-container {
		padding: 30rpx;
		background: #f8f9fa;
	}

	.search-box {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.search-input {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.list-scroll {
		height: calc(100vh - 200rpx);
	}

	.list-header {
		display: grid;
		grid-template-columns: 1.5fr 3fr 2fr;
		padding: 28rpx;
		background: #f5f7fa;
		border-radius: 16rpx;
	}

	.header-cell {
		font-size: 30rpx;
		color: #2b9939;
		font-weight: 500;
	}

	.list-item {
		display: grid;
		grid-template-columns: 1.5fr 3fr 2fr;
		padding: 28rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
		transition: all 0.2s ease;
	}

	.list-item:active {
		background: #f8f9fa;
	}

	.user-id {
		color: #2b9939;
		font-weight: 500;
	}

	.content {
		color: #606266;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.time {
		color: #909399;
		font-size: 26rpx;
	}

	.loading-status {
		padding: 40rpx;
		text-align: center;
		color: #c0c4cc;
	}

	.empty-tip {
		display: block;
		text-align: center;
		color: #909399;
		padding: 40rpx 0;
	}


	.content-popup {
		background: #fff;
		width: 80vw;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.popup-scroll {
		max-height: 60vh;
	}

	.popup-text {
		font-size: 28rpx;
		line-height: 1.6;
		white-space: pre-wrap;
	}

	.popup-close {
		margin-top: 30rpx;
		background: #2b9939;
		color: #fff;
		border-radius: 50rpx;
	}
</style>